<template>
  <div class="echarts-container">
    <div ref="echarts" class="echarts-content"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return { };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(this.$refs.echarts);
      const option = {
        title: {
          show: true,
          text: '年龄趋势',
          left:5,
          top:5
        },
        xAxis: {
          type: 'category',
          boundaryGap:false, // 线从最边上开始，紧挨边缘
          data: ['05后','00后', '95后','90后', '85后', '80后']
        },
        yAxis: {
          type: 'value',
          // scale: true // y 轴不是从 0 开始
        },
        legend: {
          data: ['男', '女'],
          icon:"circle", // 设置 legend 样式
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
            // dataView: {},
            // restore: {},
            // dataZoom: {},
            magicType: {
              type: ['line', 'bar', 'stack']
            }
          }
        },
        series: [
          {
            type: 'line',
            name: '男',
            // markPoint: {
            //   data: [
            //     {
            //       type: 'max',
            //       name: '最大值'
            //     },
            //     {
            //       type: 'min',
            //       name: '最小值'
            //     }
            //   ]
            // },
            data: [180, 200, 300, 210, 200, 266],
            stack:"hehe", //只要两条线设置的一样，就是层叠，不会交叉
            areaStyle:{}
          },
          {
            type: 'line',
            name: '女',
            smooth:true,
            lineStyle:{
              color:"red",
              type:"dotted",// dashed 虚线, dotted 点线, solid 实线
            },
            // markArea: {
            //   data: [
            //     [{
            //       xAxis:'05后'
            //     },{
            //       xAxis:'00后'
            //     }],
            //     [{
            //       xAxis: "90后"
            //     },{
            //       xAxis: "80后"
            //     }],
            //   ]
            // },
            data: [170, 120, 200, 250, 156, 225],
            stack:"hehe", //堆叠图，堆叠在相同key的上面
            areaStyle:{
              color:"pink"
            }
          }
        ]
      }
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
